<template>
	<div>
		<!-- <div style="margin:2% 0;display: inline-block;">
			<span>会员分类：</span>
			<el-select v-model="type" placeholder="请选择类型" style="width:150px;" @change="selectTrigger2(type)">
				<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div> -->
		<div style="text-align: right;">
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">刷新
			</el-button>
			<!-- <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="addRefresh" :disabled="!isAuth('memberList:add')">添加
			</el-button> -->
		</div>
		<el-table v-loading="tableDataLoading" :data="configData.content">
			<el-table-column prop="memberId" label="编号" width="80">
			</el-table-column>
			<el-table-column prop="grade" label="等级">
			</el-table-column>
			<el-table-column prop="rate" label="自购佣金比例">
			</el-table-column>
			<el-table-column prop="zhiRate" label="直属用户佣金比例">
			</el-table-column>
			<el-table-column prop="feiRate" label="非直属用户佣金比例">
			</el-table-column>
			<el-table-column prop="peopleNum" label="直属用户人数">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="150">
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" :disabled="!isAuth('memberList:update')"
						@click="amendone(scope.$index, scope.row)">编辑
					</el-button>
					<!-- <el-button size="mini" type="danger" :disabled="!isAuth('memberList:delete')"
						@click="deletes(scope.row)">删除
					</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<!-- <div style="text-align: center;margin-top: 10px;">
			<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
				:page-sizes="[5, 10, 15, 20]" :page-size="size" :current-page="page"
				layout="total,sizes, prev, pager, next" :total="totalnum2">
			</el-pagination>
		</div> -->
		<!-- 修改配置弹框 -->
		<el-dialog :title="titles" :visible.sync="dialogFormVisible1" center width="60%">
			<el-form :model="form">
				<el-form-item label="等级：" :label-width="formLabelWidth">
					<el-input v-model="form.grade" style="width:65%;" type="number" min="1" ></el-input> <!-- onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" -->
					<div style="color: red;">* 等级: 请输入数字,例如：1</div>
				</el-form-item>

				<el-form-item label="自购佣金比例：" :label-width="formLabelWidth">
					<el-input v-model="form.rate" style="width:65%;" type="number" min="0" ></el-input>
					<div style="color: red;">* 自购佣金比例: 请输入小数,例如：0.5,实际计算获取的值为总佣金的50%</div>
				</el-form-item>

				<el-form-item label="直属用户佣金比例：" :label-width="formLabelWidth">
					<el-input v-model="form.zhiRate" style="width:65%;" type="number" min="0" ></el-input>
					<div style="color: red;">* 直属用户佣金比例: 请输入小数,例如：0.03,实际计算获取的值为总佣金的3%</div>
				</el-form-item>
				<el-form-item label="非直属用户佣金比例：" :label-width="formLabelWidth">
					<el-input v-model="form.feiRate" style="width:65%;" type="number" min="0" ></el-input>
					<div style="color: red;">* 非直属用户佣金比例: 请输入小数,例如：0.02,实际计算获取的值为总佣金的2%</div>
				</el-form-item>
				<el-form-item label="直属用户人数：" :label-width="formLabelWidth">
					<el-input v-model="form.peopleNum" style="width:65%;" type="number" min="0" ></el-input>
					<div style="color: red;">* 直属用户人数: 请输入数字,例如：10</div>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="amendoneNoticeTo()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				size: 5,
				page: 1,
				state: -1,
				type: -1,
				totalnum: 0,
				totalnum2: 0,
				ids: '',
				content: '',
				activeName: 'first',
				tableDataLoading: false,
				dialogFormVisible: false,
				dialogFormVisible1: false,
				dialogFormVisible2: false,
				dialogFormVisible3: false,
				formLabelWidth: '200px',
				checkBoxData: [], //多选框选择的值
				tableData: [],
				configData: {},
				form: {
					memberId: '',
					rate: '',
					zhiRate: '',
					feiRate: '',
					peopleNum: '',
					grade: '',
				},
				titles: '修改',
				form2: {
					picture: '',
				},
				statenum: [{
					value: -1,
					label: '全部'
				}, {
					value: 0,
					label: '待审核'
				}, {
					value: 1,
					label: '同意'
				}, {
					value: 2,
					label: '拒绝'
				}],
				types: [{
					value: -1,
					label: '全部'
				}, {
					value: 1,
					label: '超级会员'
				}, {
					value: 2,
					label: '导师'
				}, {
					value: 3,
					label: '运营商'
				}],
			}
		},
		methods: {
			handleSizeChange1(val) {
				this.size = val
				this.configSelect()
			},
			handleCurrentChange1(val) {
				this.page = val
				this.configSelect()
			},
			// 刷新
			refresh() {
				this.configSelect()
			},
			selectTrigger2() {
				this.page = 1
				this.size = 5
				this.configSelect()
			},
			// 修改配置弹框
			amendone(index, rows) {
				this.dialogFormVisible1 = true
				this.titles = '修改'
				this.form.memberId = rows.memberId
				this.form.rate = rows.rate
				this.form.zhiRate = rows.zhiRate
				this.form.feiRate = rows.feiRate
				this.form.peopleNum = rows.peopleNum
				this.form.grade = rows.grade
			},
			// 修改配置
			amendoneNoticeTo() {
				if (this.form.grade === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选择等级',
						type: 'warning'
					});
					return
				}
				if (this.form.rate === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入自购佣金比例',
						type: 'warning'
					});
					return
				}
				if (this.form.zhiRate === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入直属用户佣金比例',
						type: 'warning'
					});
					return
				}
				if (this.form.feiRate === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入非直属用户佣金比例',
						type: 'warning'
					});
					return
				}
				if (this.form.peopleNum === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入直属用户人数',
						type: 'warning'
					});
					return
				}
				this.$http({
					url: this.$http.adornUrl2('/member/saveMember'),
					method: 'post',
					data: this.$http.adornData({
						'memberId': this.form.memberId,
						'rate': this.form.rate,
						'zhiRate': this.form.zhiRate,
						'feiRate': this.form.feiRate,
						'peopleNum': this.form.peopleNum,
						'grade': this.form.grade,
					})
				}).then(({
					data
				}) => {
					if (data && data.status === 0) {
						this.dialogFormVisible1 = false
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.configSelect()
							}
						})
					} else {
						this.$message.error(data.msg)
					}
				})
			},
			// 获取数据列表
			dataSelect() {
				this.tableDataLoading = true
				let page = this.page - 1
				this.$http({
					url: this.$http.adornUrl2('/member/selectMember'),
					method: 'get',
					params: this.$http.adornParams({
						'page': page,
						'size': this.size,
						'state': this.state,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data
					this.tableData = returnData.content
					this.totalnum = returnData.totalElements
				})
			},
			// 获取会员配置数据列表
			configSelect() {
				this.tableDataLoading = true
				let page = this.page - 1
				this.$http({
					url: this.$http.adornUrl2('/member/selectMemberList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page - 1,
						'size': this.size
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data
					this.configData = returnData
					this.totalnum2 = returnData.totalElements
				})
			},
			// 添加、修改弹框
			addRefresh() {
				this.dialogFormVisible1 = true
				this.titles = '添加'
				this.form.memberId = ''
				this.form.rate = ''
				this.form.zhiRate = ''
				this.form.feiRate = ''
				this.form.peopleNum = ''
				this.form.grade = ''
			},
			// 删除
			deletes(row) {
				this.$confirm(`确定批量删除该信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl2('/member/deleteMember'),
						method: 'post',
						params: this.$http.adornParams({
							'memberId': row.memberId
						})
					}).then(({
						data
					}) => {
						if (data.status == 0) {
							this.$message({
								message: '批量删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.configSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'error',
								duration: 1500,
								onClose: () => {
									this.configSelect()
								}
							})
						}
					})
				}).catch(() => {})
			}
		},
		mounted() {
			this.configSelect()
		}
	}
</script>

<style>
</style>
